<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue2.js"></script>
    <!--    引入vue路由js文件-->
    <script src="../js/vue-router.js"></script>
</head>
<body>
<!--
      传统:   login.html   register.html
      SPA :   组件  login  register

      路由 :
               /login       login
              /register     register      路由列表
-->

<div id="app">
    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
</div>

<script>

    //    定义登录组件
    const login = {
        template: `
        <div>
            <h2>欢迎登录</h2>
            <form action="javascript:;">
                <p><input type="text" placeholder="请输入用户名"></p>
                <p><input type="password" placeholder="请输入密码"></p>
                <button>立即登录</button>
            </form>
        </div>
        `
    }

    // 定义注册组件
    const register = {
        template: `
        <div>
            <h2>欢迎注册</h2>
            <form action="javascript:;">
                <p><input type="text" placeholder="请输入用户名"></p>
                <p><input type="password" placeholder="请输入密码"></p>
                <button>立即登录</button>
            </form>
        </div>
        `
    }

    // 定义404组件
    const  filenotfound = {
        template:`
            <div>
                    页面找不到,请重试
            </div>
        `
    }

    /*
    * 2. 定义路由
    * 每个路由应该映射一个组件。 其中"component" 可以是通过 Vue.extend() 创建的组件构造器，或者，只是一个组件配置对象。
    * */

    // 定义路由列表
    const  routes = [
        {
         path: "/",
         redirect: '/login'
        },
        {
            path:'/login',    //  用户请求的资源路径
            component: login  //  路径对应的组件
        },
        {
            path:'/register',
            component: register
        },{
            path:'/**',
            component: filenotfound
        }
    ]

    // 3. 创建 router 实例，然后传 `routes` 配置
    const router = new VueRouter({
        routes
    })

    // 4.创建和挂载根实例。
    // 记得要通过 router 配置参数注入路由，
    // 从而让整个应用都有路由功能
    let vm = new Vue({
        el: '#app',
        data: {},
        methods: {},
        router
    })

</script>
</body>
</html>